<template>
  <div class="test">
    <div style="height: 600px">
      <MyTable :column="tabColums" :data="tabData" @cell-click="cellClick">
        <template v-slot:name="{ row, column }">
          <template>
            <div id="input">
              <el-input
                @blur="blur(row, `Flag-${row.index}-${column}`)"
                v-if="row[`Flag-${row.index}-${column}`]"
                size="mini"
                :ref="`Flag-${row.index}-${column}`"
                v-model="row.name"
              ></el-input>

              <span v-else>{{ row.name }} </span>
            </div>
          </template>
        </template>

        <template v-slot:love="{ row, column }">
          <template>
            <div id="selet">
              <el-select
                v-if="row[`Flag-${row.index}-${column}`]"
                filterable
                :ref="`Flag-${row.index}-${column}`"
                v-model="row.love"
                placeholder="请选择"
                size="mini"
                value-key="value"
                @blur="blur(row, `Flag-${row.index}-${column}`, true)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <span v-else>{{ returnLable(row.love, options) }} </span>
            </div>
          </template>
        </template>

        <template v-slot:do="{ row, index }">
          <el-button size="mini" @click.stop="handleEdit(row, index)">编辑</el-button>
        </template>
      </MyTable>
    </div>
  </div>
</template>

<script>
import MyTableMx from '@/mixin/MyTableMx.js';
import MyTable from '@/components/MyTable/index.vue';
export default {
  name: '',
  components: { MyTable },
  mixins: [MyTableMx], // 使用混入
  props: {},
  data() {
    return {
      token: '',
      tabColums: [
        {
          label: '姓名',
          prop: 'name',
          isSlot: true,
        },
        {
          label: '生活中',
          children: [
            { label: '能力', prop: 'love', isSlot: true },
            {
              label: '爱好',
              children: [
                { label: '喜好', prop: 'unlove' },
                { label: '恶好', prop: 'Vunlove' },
              ],
            },
          ],
        },
        { label: '操作', prop: 'do', isSlot: true },
      ],

      tabData: [
        { name: '张三', age: 19, addr: '中国', love: '篮球', unlove: '打游戏', Vunlove: '睡觉' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
        { name: '李四', age: 20, addr: '美国', love: '乒乓球', unlove: '洗澡', Vunlove: '出去玩' },
      ],

      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {},
  methods: {
    handleEdit(row, index) {
      console.log(11111);
    },
  },
};
</script>

<style scoped lang="less">
.test {
  height: 100%;
}
</style>
